<template>
  <div class="newpage">
    <iu-header>
      <template #left>
        <x-icon
          @click="back"
          type="ios-arrow-back"
          size="21"
          fill="#fff"
        ></x-icon>
      </template>
      <template #title>{{ detail.name || "" }}</template>
      <template #right>
       <div v-focusable  @click="backToHomepage">
          <iconSvg name="home" w="20px" h="22px" class="right_icon"></iconSvg>
        </div>
      </template>
    </iu-header>
    <div class="newpage_work">
      <tab
        class="newpage_tab"
        style="z-index:0"
        active-color="#456de6"
        default-color="#fff"
        custom-bar-width="80%"
        v-if="showType === 'list'"
      >
        <tab-item
          v-if="statusIndex != 13"
          @on-item-click="handler(0)"
          :selected="status == 0"
        >
          未完成
        </tab-item>
        <tab-item @on-item-click="handler(1)" :selected="status == 1">
          已完成
        </tab-item>
        <tab-item @on-item-click="handler(3)" :selected="status == 3">
          隐患汇总
        </tab-item>
      </tab>
      <div class="newpage_work_bottom" v-if="status !== 3">
        <div class="newpage_work_conent" v-if="checkStandardList.length">
          <checklist
            class="conent-list"
            v-for="item in checkStandardList"
            :check-item="item"
            :is-standard="true"
            :show-standard="item.id === showStandardItemId"
            :key="item.id"
            @eventDetail="eventDetail"
            @eventCheckList="eventCheckList"
            @eventStandardItem="eventStandardItem"
          ></checklist>
        </div>
        <div class="not-content" v-else>
          <img src="/static/img/zwlr-icon.png" />
          <div class="title">暂无数据</div>
        </div>
      </div>
      <div class="newpage_work_bottom" v-else-if="status === 3">
        <div class="newpage_work_conent" v-if="troubleList.length">
          <div class="tab-list">
            <div class="tab-item" v-for="item in tabNav" :key="item.key">
              <span>
                {{ item.num }}
              </span>
              <span>
                {{ item.value }}
              </span>
            </div>
          </div>
          <div class="trouble-type-filter">
            <select class="iu-select" required v-model="troubleLevel">
              <option value="" selected>隐患等级</option>
              <option :value="'一般隐患'">一般隐患</option>
              <option :value="'重大隐患'">重大隐患</option>
            </select>
          </div>
          <riskslist
            class="conent-list"
            :risks-item="item"
            v-for="item in troubleFilter"
            :key="item.id"
            @eventRisksList="eventRisksList"
          ></riskslist>
        </div>
        <div class="not-content" v-else>
          <img src="/static/img/zwlr-icon.png" />
          <div class="title">暂无数据</div>
        </div>
        <div
          class="newpage_work_more"
          v-if="showMore"
          @click="getCertificateMore"
        >
          查看更多
        </div>
      </div>
    </div>
    <div v-transfer-dom>
      <confirm
        v-model="showConfirm"
        title="警告"
        @on-cancel="onCancel"
        @on-confirm="handleSubmit"
      >
        <p>
          您有未完成检查的风险辨识<br />提交后系统会自动设置成通过<br />确定提交吗？
        </p>
      </confirm>
    </div>
  </div>
</template>
<script>
import { Tab, TabItem, Confirm, TransferDom } from "vux";
import iuHeader from "@/components/common/header/index";
import SafetyManageDao from "@/daos/safety_manage_dao";
import checklist from "@/components/common/safetymanage/checklist";
import riskslist from "@/components/common/safetymanage/riskslist";
import { GetUser } from "@/mixin";
import dayjs from "dayjs";
export default {
  name: "safetyCheckResultList",
  directives: {
    TransferDom
  },
  components: {
    Tab,
    TabItem,
    Confirm,
    iuHeader,
    checklist,
    riskslist
  },
  data() {
    return {
      showMore: false,
      showConfirm: false,
      troubleList: [],
      checkStandardList: [],
      showStandardItemId: 0,
      pageSize: 10,
      pageNum: 1,
      troubleLevel: "",
      showType: "list",
      itemAccomplish: 0,
      total: 0,
      detail: {},
      recordId: 0,
      status: 0,
      store: {
        id: 0
      }
    };
  },
  created() {
    this.statusIndex = this.$route.query.status;
    // this.itemAccomplish = this.$route.query.isAccomplish;
    this.showStandardItemId = this.$route.query.checkItemId || 0;
    // this.showType = this.$route.query.showType || "list";
    if (this.statusIndex == 13) {
      this.status = 1;
    }
    if (!this.user) {
      this.getUser();
    }
  },
  mixins: [GetUser],
  //返回首页的公共方法
  inject: ["backToHomepage"],
  activated() {
    this.recordId = this.$route.query.id || 0;
    this.init();
    // this.getCheckTroubleList(this.recordId, this.status);
  },
  computed: {
    user() {
      return this.$store.state.user;
    },
    standardItem() {
      if (this.detail.content) {
        return JSON.parse(this.detail.content) || [];
      }
      return [];
    },
    tabNav() {
      // 1待整改3待验收5已逾期7已完成
      let tabNav = [
        { key: 1, value: "待整改", num: 0 },
        { key: 3, value: "待验收", num: 0 },
        { key: 5, value: "已逾期", num: 0 },
        { key: 7, value: "已完成", num: 0 }
      ];
      this.troubleList.forEach(element => {
        tabNav.forEach(nav => {
          if (nav.key == element.status) {
            nav.num += 1;
          }
        });
      });
      return tabNav;
    },
    troubleFilter() {
      if (!this.troubleLevel) {
        return this.troubleList;
      }
      return this.troubleList.filter(e => e.troubleLevel === this.troubleLevel);
    }
  },
  methods: {
    init() {
      this.getCheckSecurityRecordDetails(this.recordId);
      this.getCheckStandardItemRecordList(this.recordId, this.status);
    },
    back() {
      this.$router.go(-1);
    },
    handler(e) {
      this.pageNum = 1;
      this.pageSize = 10;
      this.status = e;
      if (this.status !== 3) {
        this.getCheckSecurityRecordDetails(this.recordId);
        this.getCheckStandardItemRecordList(this.recordId, this.status);
      } else {
        this.getCheckTroubleListByRecordId(this.recordId);
      }
    },
    getCheckSecurityRecordDetails(recordId) {
      SafetyManageDao.getCheckSecurityRecordDetails({ recordId }, res => {
        if (res) {
          this.detail = res;
          this.$store.commit("setCheckDetails", this.detail);
        }
      });
    },
    getCheckTroubleListByRecordId(recordId) {
      SafetyManageDao.getCheckTroubleListByRecordId(recordId, res => {
        this.troubleList.splice(0);
        if (res) {
          this.troubleList = res;
        }
      });
    },
    getCheckStandardItemRecordList(checkSecurityRecordId, status) {
      let params = {
        checkSecurityRecordId,
        isAccomplish: status // 状态  0未检查 1已完成
      };
      SafetyManageDao.getCheckStandardItemRecordList(params, res => {
        this.checkStandardList.splice(0);
        if (res && res.length) {
          if (this.showType === "detail") {
            res = res.filter(e => e.id === this.showStandardItemId);
          }
          this.checkStandardList = res;
          this.showStandardItemId = this.showStandardItemId
            ? this.showStandardItemId
            : (res[0] && res[0].id) || 0;
          console.log(this.showStandardItemId || itemId);
          this.getCheckStandardItemRecordItemList(
            this.showStandardItemId || itemId
          );
        }
      });
    },
    getCheckStandardItemRecordItemList(itemId) {
      SafetyManageDao.getCheckStandardItemRecordItemList(itemId, res => {
        if (res && res.length) {
          let index = this.checkStandardList.findIndex(e => e.id == itemId);
          this.$set(this.checkStandardList[index], "items", res);
        }
      });
    },
    getCertificateMore() {
      this.pageNum++;
      this.getCheckTroubleListByRecordId();
    },
    certificateDetail(id) {
      this.store.id = id;
      this.$router.push({
        name: "certificate_manage",
        query: {
          id
        }
      });
    },
    eventDetail(item, tag) {
      // console.log(item);
      this.$store.commit("setStandard", item);
      this.$store.commit("setStandardRecordDetail", {});
      if (tag === "trouble") {
        this.$router.push({
          name: "safetyCheckResultDetail",
          query: {
            standardId: item.id
          }
        });
      } else {
        let num = item.items.filter(e => e.type).length;
        console.log(num);
        if (num === item.items.length) {
          this.handleSubmit();
        } else {
          this.showConfirm = true;
        }
      }
    },
    eventCheckList(item, tag = false) {
      this.showStandardItemId =
        this.showStandardItemId === item.id ? 0 : item.id;
      if (this.showStandardItemId) {
        this.getCheckStandardItemRecordItemList(this.showStandardItemId);
      }
    },
    eventStandardItem(item, standardItem) {
      // console.log(item,standardItem);
      if (
        item.isAccomplish !== 0 ||
        !this.detail.userIds.includes(this.user.id)
      ) {
        return;
      }
      this.$store.commit("setStandard", item);
      this.$store.commit("setStandardItem", standardItem);
      let { id } = standardItem;
      this.$router.push({
        name: "safetyCheckResult",
        query: {
          id
        }
      });
    },
    onCancel() {
      this.showConfirm = false;
    },
    eventRisksList(item) {
      this.$router.push({
        name: "safetyRisksDetail",
        query: {
          id: item.id
        }
      });
    },
    eventSubmit() {},
    handleSubmit() {
      let id = this.$store.state.safetyCheck.standard.id;
      SafetyManageDao.postCheckStandardRecordSubmit(id, res => {
        if (res && res.description) {
          this.$commom.alert(res.description || "");
        } else {
          this.$vux.toast.show({ text: "提交成功！", type: "success" });
          this.getCheckStandardItemRecordList(this.recordId, this.status);
        }
      });
    }
  }
};
</script>
<style lang="less">
.newpage_tab {
  .vux-tab {
    height: 45px !important;
    background: #1b1c32;
    .vux-tab-item {
      background: none;
      color: #fff;
    }
  }
}
#app,
.content {
  height: 100%;
}
</style>
<style lang="less" scoped>
.report_time {
  font-size: 12px;
  color: #ffffff59;
}
.newpage {
  height: 100vh;
  background: #1b1c32;
  overflow-y: scroll;
}
.none_conent {
  text-align: center;
  color: gray;
  /* height:30px;
    line-height:30px; */
  border-bottom: none !important;
}
.newpage_work_more {
  height: 40px;
  font-size: 12px;
  line-height: 40px;
  text-align: center;
  color: #456de6;
}
.newpage_work_second {
  color: #456de6;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.newpage_work_ul {
  display: flex;
  justify-content: space-between;
}
.newpage_work_span {
  font-size: 12px;
  color: #456de6;
}
// .early-type{

// }
.urgent-priority,
.early-type-err {
  color: red;
}
.vital-priority,
.early-type-warning {
  color: #d98806;
}

.newpage_work_li {
  font-size: 12px;
  flex: 1;
  span {
    display: inline-block;
    &:nth-child(1) {
      height: 18px;
      text-align: center;
      line-height: 18px;
      // background:#456de6;
      margin-right: 9px;
    }
    &:nth-child(2) {
      width: 80%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
    }
  }
}
.newpage_work_conent {
  color: #fff;
  background: #1b1c32;
  padding: 8px;

  .tab-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    .tab-item {
      flex: none;
      width: 22%;
      display: flex;
      flex-direction: column;
      text-align: center;
      line-height: 1;
      padding: 3px 0 8px;
      background-color: #292a4d;
      color: #fff;

      span {
        margin-top: 5px;
        &:nth-child(1) {
          font-size: 16px;
        }
      }
    }
  }
  .conent-list {
    margin-bottom: 16px;
  }
}
.not-content {
  width: 100%;
  padding: 16px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  img {
    width: 64px;
    height: 64px;
    margin-left: 20px;
  }
  .title {
    margin: 8px auto;
    width: 126px;
    height: 40px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(158, 198, 251, 1);
    line-height: 20px;
    text-align: center;
  }
}
.trouble-type-filter {
  padding: 0 0 8px;
  display: flex;
  justify-content: flex-end;
}
.iu-select {
  height: 26px;
  width: 25%;
  padding: 2px 4px 3px;
  border: none;
  outline: none;
  border: 1px solid #eee;
  border-radius: 2px;
  font-size: 14px;
  color: #fff;
  background: transparent;
  option {
    color: #333;
    background: rgba(255, 255, 255, 0.9);
  }
}
.newpage_title {
  height: 44px;
  background: #18182c;
  padding: 0 15px;
  display: flex;
  span {
    display: inline-block;
    color: #ffff;
    font-size: 15px;
    vertical-align: middle;
  }
  .nav-left {
    .company-logo {
      height: 100%;
      width: 48px;
    }
  }
  .nav-center {
    flex: 1;
    line-height: 44px;
    text-align: center;
    font-size: 16px;
    color: #fff;
  }
  .nav-right {
    margin-top: 12px;
    width: 36px;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    .paidan {
      margin-top: -8px;
      i {
        font-size: 26px;
      }
    }
  }
  .nav_border_left {
    border-left: 2px solid #fff;
    height: 20px;
  }
}
</style>
